<template>
  <div class="page">
    <div class="add-panel">
      <Button
        block
        type="primary"
        plain
        :style="{ borderStyle: 'dashed', borderWidth: '3px' }"
        @click="toPath('/address/edit')"
        >新增地址</Button
      >
    </div>
    <RadioGroup v-model="defaultAddress" @change="changeDefaultAddress">
      <div class="delivery-panel" v-for="item in addressList" :key="item.id">
        <div class="info-panel">
          <div class="address">{{ item.address }}</div>
          <div class="userinfo">
            <div class="username">{{ item.userName }}</div>
            <div class="phone">{{ item.phoneNumber }}</div>
          </div>
        </div>
        <div class="icon">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              font-size: 14px;
            "
          >
            <Radio :name="item.id" icon-size="14px" />
            默认地址
          </div>
          <div
            @click="toPath('/address/edit?id=' + item.id)"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
            "
          >
            <Icon name="edit" color="#1989fa" />
            <span>编辑</span>
          </div>
        </div>
      </div>
    </RadioGroup>
  </div>
</template>
<script lang="ts" setup>
import { selectAddressAll, updateDefaultAddress } from "@/api/address";
import { Icon, RadioGroup, Radio, Button, showToast } from "vant";
import { inject, onMounted, ref } from "vue";
const toPath = inject("toPath");
/**地址列表 */
let addressList: any = ref([]);
/**默认地址 */
let defaultAddress = ref(null);
onMounted(() => {
  selectAddressAll().then((res) => {
    addressList.value = res.data;
    const list = addressList.value.filter((item: any) => {
      return item.isDefault;
    });
    defaultAddress.value = list.length > 0 ? list[0].id : null;
  });
});
/**修改默认地址 */
const changeDefaultAddress = (name: string) => {
  updateDefaultAddress(Number(name)).catch((_) => showToast("修改失败"));
};
</script>

<style lang="less" scoped>
.page {
  padding: 0px 10px;
  min-height: 100%;
  box-sizing: border-box;
}
.add-panel {
  width: calc(100% - 20px);
  margin: 0px auto 10px auto;
  text-align: center;
  padding: 5px;
}
.delivery-panel:last-child {
  border-bottom: 1px var(--van-border-color) solid;
}
.delivery-panel {
  padding: 15px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px var(--van-border-color) solid;
  .info-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .address {
      font-weight: 600;
      font-size: 18px;
    }
    .userinfo {
      display: flex;
      font-size: 13px;
      color: #666;
      gap: 5px;
    }
  }
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
